<template>
	<view>
		<uni-popup ref="newPopup" type="center" :isTopOffset="isTopOffset" @change="visibleChange">
			<view class="new-popup">
				<view class="popup-title">
					<view class="popup-titlebg"></view>
					<text class="popup-title-text">{{newGuyInfo.top_title}}</text>
					<view class="popup-titlebg"></view>
				</view>
				<view class="welfare-list" :class="{center:newGuyInfo.element&&newGuyInfo.element.length===1}" v-if="newGuyInfo.element">
					<view class="welfare-item" v-for="(item,index) in newGuyInfo.element" :key="index">
						<text class="tag" v-if="item.tips">{{item.tips}}</text>
						<view class="welfare-title">{{item.title}}</view>
						<view class="welfare-content">{{item.content}}</view>
					</view>
				</view>
				<button  @click="onGetClick" class="popup-btn" v-if="newGuyInfo.button_info">{{newGuyInfo.button_info.button_name}}</button>
			</view>
		</uni-popup>
		<support-success :visible.sync="successPopupVisible" :isTopOffset="isTopOffset" :getNum="successInfo.register_give_wish_coin_num" :info="successInfo" title="福利领取成功" showMore hideBtn></support-success>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import SupportSuccess from '@/components/support-success-popup.vue'
	export default {
		name:'new-popup',
		components:{
			uniPopup,
			SupportSuccess
		},
		props:{
			isTopOffset:Boolean,
			requestUrl:{
				type:String,
				default:'getPopups'
			},
			requestData:{
				type:Object,
				default(){
					return{}
				}
			},
			name:{
				type:String,
				default:'register_give'
			}
		},
		data() {
			return {
				newGuyInfo:{},
				isBtnClick:false,
				successPopupVisible:false,
				successInfo:{}
			}
		},
		mounted(){
			this.getPopups()
		},
		methods:{
			close(){
				this.$refs['newPopup'].close()
			},
			async visibleChange({show}){
				if(!show){
					let data=await this.$api.confirmGive({},{loading:false})
					await this.$store.dispatch('getUserInfo',{loading:false})
					this.successPopupVisible=this.isBtnClick
					this.successInfo=data
				}
			},
			onGetClick({detail}){
				this.isBtnClick=true
				this.$refs['newPopup'].close()
			},
			async getPopups(){
				let data = await this.$api[this.requestUrl](this.requestData,{loading:false})
				let newGuy=data.find(item=>item.name===this.name)
				if(newGuy){
					this.newGuyInfo=newGuy.data
					this.$refs['newPopup'].open()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.new-popup{
	position: relative;
	width: 580rpx;
	padding:50rpx;
	border-radius: 10rpx;
	background:#E7404A;
	text-align: center;
	.popup-titlebg{
		position: relative;
		flex:1;
		height: 1px;
		background-color: #FEE2B2;
		&::before{
			position: absolute;
			content:'';
			right:0;
			top:-5rpx;
			width:11rpx;
			height:11rpx;
			background-color: #FEE2B2;
			transform: rotate(45deg);
		}
		&:last-child{
			&::before{
				right: initial;
				left: 0;
			}
		}
	}
	.popup-title{
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		margin-bottom:34rpx;
		width:100%;
	}
	.popup-title-text{
		position: relative;
		z-index: 1;
		margin:0rpx auto;
		display: block;
		padding:0rpx 20rpx;
		height:50rpx;
		font-weight: bold;
		line-height: 50rpx;
		font-size: 40rpx;
		color:#FEE2B2;
	}
	.welfare-list{
		margin-bottom: 40rpx;
		&.center{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			min-height: 310rpx;
		}
	}
	.welfare-item{
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 150rpx;
		background:rgba(255,255,255,1);
		border-radius:10rpx;
		margin-bottom: 30rpx;
	}
	.welfare-title{
		margin-bottom: 5rpx;
		font-size: 40rpx;
		color:#DE3640;
		font-weight: bold;
	}
	.welfare-content{
		font-size: 24rpx;
		color:#F35846;
	}
	.tag{
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		top:0;
		left: 0;
		width:110rpx;
		height:40rpx;
		font-size: 22rpx;
		color:#DE3640;
		background:rgba(255,232,165,1);
		border-radius:10rpx 0rpx 20rpx 0rpx;
	}
	.popup-btn{
		width: 100%;
		height: 88rpx;
		font-size: 36rpx;
		font-weight: bold;
		color: #DE3640;
		background-color: rgba(255,211,82,1);
		// box-shadow:0px 3px 0px 0px rgba(255,232,165,1);
		border-radius: 10rpx;
	}
}
</style>
